import { FC, useEffect } from 'react';
import { Space, Card } from 'antd';
import AMapLoader from '@amap/amap-jsapi-loader';


const City: FC = () => {
  useEffect(() => {
    let map: any;
    AMapLoader.load({
      key: '25a65b25fc17f6e96891c20798d02f44',
      version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        // 是否加载 AMapUI，缺省不加载
        version: '1.1', // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
      Loca: {
        // 是否加载 Loca， 缺省不加载
        version: '1.3.2', // Loca 版本，缺省 1.3.2
      },
    })
      .then((AMap) => {
        map = new AMap.Map('container', {
          zoom: 13, //级别
          center: [120.153576, 30.440568], //中心点坐标
          viewMode: '3D', //使用3D视图
        });

        //实时路况图层
        var trafficLayer = new AMap.TileLayer.Satellite({
          zIndex: 10,
        });
        map.add(trafficLayer); //添加图层到地图

        // 添加插件
        AMap.plugin('AMap.ToolBar', function () {
          //异步加载插件
          var toolbar = new AMap.ToolBar();
          map.addControl(toolbar);
        });
        AMap.plugin('AMap.Scale', function () {
          //异步加载插件
          var toolbar = new AMap.Scale();
          map.addControl(toolbar);
        });

        var marker = new AMap.Marker({
          position: new AMap.LngLat(120.153576, 30.440568),
          title: '杭州',
        });
        // 将创建的点标记添加到已有的地图实例：
        map.add(marker);

        // var circle = new AMap.Circle({
        //   center: new AMap.LngLat(120.26408, 30.305451), // 圆心位置
        //   radius: 10000, // 圆半径
        //   fillColor: 'rgba(255, 0, 0, 0.3)', // 圆形填充颜色
        //   strokeColor: '#fff', // 描边颜色
        //   strokeWeight: 2, // 描边宽度
        // });

        // map.add(circle);
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map.destroy();
    };
  }, []);
  return (
    <Space direction="vertical" style={{ width: "100%" }}>
      <Card title="地图">
        <div id="container" style={{ height: 400 }}></div>
      </Card>
    </Space>
  )
}
export default City;